const path = require('path')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    // Bundle 的入口文件，根据入口文件递归的寻找依赖，将每个依赖处理，最终打包
    entry: './src/index.js',
    // Bundle 的输出文件，配置打包输出的位置和文件名
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, './dist')
    },
    // 目标环境，不同的目标环境会影响 webpack 打包时的决策
    // production 代码压缩一系列优化操作
    // development 有利于热更新的处理，识别哪个模块变化
    mode: 'development',
    // 默认情况下，webpack 仅支持 js 和 json 文件，通过不同的 loader，可以支持解析其它类型文件
    // 理论上，只要有相应的 loader，webpack 可以处理任何类型的文件
    module: {
        rules: [
            {
                test: /\.css$/,
                // 只使用 css-loader 的话，确实可以成功的处理 css 文件，但是 css 的内容只是作为一段字符串引入到 js 中，并不会按照期望生效
                // 因此需要 style-loader 来帮忙处理 css 内容放进 style 标签内
                // 对同一类型文件使用 loader 时，use 属性可以接收一个数组，并且从右向左执行
                // 在这里，先使用 css-loader 将 css 文件处理，再通过 style-loader 将 css 内容放进 style 标签使其生效
                // style-loader 会将处理好的 css 内容放入 style 标签内，引用的每一个 css 文件都对应一个 style，且 style 的先后顺序根据引用顺序排列
                // 进阶：将 css 内容导出成文件
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader',
                    'css-loader',
                    'postcss-loader'
                    // 由于 postcss 有自己的配置文件，所以可以单独在配置文件 postcss.config.js 中配置
                    // {
                    //     loader: 'postcss-loader',
                    //     options: {
                    //         postcssOptions: {
                    //             plugins: [require('autoprefixer')]
                    //         }
                    //     }
                    // }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 表示导入什么名字什么格式，打包生成就是什么名字什么格式
                        name: '[name].[hash].[ext]',
                        // 表示图片大小阈值，超出阈值的图片会被 file-loader 处理（原封不动的放置到打包文件夹下），在使用时会提供一个可访问地址（打包后对应的访问地址）
                        // 没有超出阈值的图片会被处理成 base64 放置在 bundle 文件中
                        limit: 1024 * 3,
                        outputPath: 'img/',
                        publicPath: '/img'
                    }
                }
            }
        ]
    },
    // loader 主要的职责是让 webpack 识别更多的文件类型，而 plugin 的职责则是让其可以控制构建流程，从而执行一些特殊任务（定制化）
    plugins: [
        // css 内容导出为文件
        new MiniCssExtractPlugin({
            filename: 'css/[name].[hash].css'
        }),
        // 自动生成 html，且将 Bundle 自动导入
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        // 自动清空 dist
        new CleanWebpackPlugin()
    ],
    // 开启本地服务
    devServer: {
        port: 8888,
        open: true
    }
}